<template>
  <div>
    <a-modal
      title="领取客户列表"
      v-model="visible"
      :footer="null"
      :z-index="200"
      :width="1000"
      @cancel="onCancel"
    >
      <s-table
        bordered
        size="small"
        ref="table"
        :custom-row="onRowClick"
        :row-selection="rowSelection"
        :row-key="(record) => record.customer_id"
        :columns="adviserColumns"
        :data="adviserData"
      >
        <div slot="title">
          <a-button size="small" :disabled="selectedRowKeys.length == 0" style="margin-right:5px" type="danger" @click="onAppoint">批量转移</a-button>
        </div>
        <div
          slot="filterRange1"
          slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
          style="padding: 8px"
        >
          <a-range-picker
            style="width: 228px; margin-bottom: 8px; display: block;"
            :value="selectedKeys[0]"
            @change="(date,dateString) => onChange1(date,dateString)"
          />
          <a-button
            type="primary"
            icon="search"
            size="small"
            style="width: 110px; margin-right: 8px"
            @click="() => handleRange1(selectedKeys, confirm, column.dataIndex)"
          >
            搜索
          </a-button>
          <a-button size="small" style="width: 110px" @click="() => rangeReset1(clearFilters)">
            重置
          </a-button>
        </div>
        <div
          slot="filterRange2"
          slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
          style="padding: 8px"
        >
          <a-range-picker
            style="width: 228px; margin-bottom: 8px; display: block;"
            :value="createValue2"
            @change="(date,dateString) => onChange2(date,dateString)"
          />
          <a-button
            type="primary"
            icon="search"
            size="small"
            style="width: 110px; margin-right: 8px"
            @click="() => handleRange2(selectedKeys, confirm, column.dataIndex)"
          >
            搜索
          </a-button>
          <a-button size="small" style="width: 110px" @click="() => rangeReset2(clearFilters)">
            重置
          </a-button>
        </div>
        <template slot="source" slot-scope="text">
          {{sourceOpts[text]}}
        </template>
        <template slot="num" slot-scope="text">
          <a-tag color="red">{{text}}</a-tag>
        </template>
      </s-table>
    </a-modal>
    <a-modal
      title="指派数据"
      v-model="visible2"
      :width="500"
      :confirm-loading="loading"
      :z-index="500"
      @ok="submitAppoint"
    >
      <a-alert
        message="此操作不可逆"
        description="转移包含：客户、业务、合同"
        type="error"
        show-icon
      />
      <p></p>
      <a-select
        show-search
        v-model="transferForm['to']"
        :filter-option="filterOption"
        style="width: 100%"
        placeholder="请选择数据要指派给谁"
      >
        <a-select-option v-for="(item,index) in userOpts" :key="index" :value="index">{{item}}</a-select-option>
      </a-select>
    </a-modal>
  </div>
</template>

<script>
  import { STable } from '@/components'
  import memberColumns from '@/columns/member'
  import { getMemberReceive } from '@/api/member'
  import { getAppoint, postAppoint } from '@/api/customer'

  export default {
    props: {
      receiveType: {
        type: Object,
        default: null
      }
    },
    components: {
      STable
    },
    name: 'MCust',
    data () {
      return {
        visible: true,
        adviserColumns: memberColumns.adviser_receive,
        adviserData: parameters => {
          return getMemberReceive(Object.assign(parameters, this.receiveType, this.queryParam)).then(res => {
            this.sourceOpts = res.result.source_opts
            return res.result
          })
        },
        sourceOpts: {},
        selectedRowKeys: [],
        createValue1: [],
        createValue2: [],
        queryParam: {},
        transferForm: {},
        visible2: false,
        loading: false,
        userOpts: {}
      }
    },
    computed: {
      rowSelection () {
        return {
          onChange: this.onSelectChange
        }
      }
    },
    methods: {
      filterOption (input, option) {
        return (option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0)
      },
      onCancel () {
        this.visible = false
        this.$emit('cancel', this.visible)
      },
      onSelectChange (selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
      },
      onRowClick (record, index) {
        return {
          on: {
            click: () => {
            },
            dblclick: () => {
              this.onCancel()
              this.$router.push({ name: 'CustomerDetail', params: { id: record.customer_id } })
            }
          }
        }
      },
      onChange1 (date, dateString) {
        this.createValue1 = date
        this.queryParam['filter[begin_created_at]'] = dateString[0]
        this.queryParam['filter[end_created_at]'] = dateString[1]
      },
      onChange2 (date, dateString) {
        this.createValue2 = date
        this.queryParam['filter[begin_received_at]'] = dateString[0]
        this.queryParam['filter[end_received_at]'] = dateString[1]
      },
      handleRange1 (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.$refs.table.refresh(true)
      },
      rangeReset1 (clearFilters) {
        clearFilters()
        this.createValue1 = []
        delete this.queryParam['filter[begin_created_at]']
        delete this.queryParam['filter[end_created_at]']
        this.$refs.table.refresh(true)
      },
      handleRange2 (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.$refs.table.refresh(true)
      },
      rangeReset2 (clearFilters) {
        clearFilters()
        this.createValue2 = []
        delete this.queryParam['filter[begin_received_at]']
        delete this.queryParam['filter[end_received_at]']
        this.$refs.table.refresh(true)
      },
      onAppoint () {
        this.transferForm = {}
        getAppoint().then(res => {
          if (res.status === 0) {
            this.userOpts = res.result.to_user_opts
            this.visible2 = true
          } else {
            this.$warning({
              title: res.msg
            })
          }
        })
      },
      submitAppoint () {
        const app = this
        const data = {}
        data['cids'] = app.selectedRowKeys
        postAppoint(data, '').then(res => {
          if (res.status === 0) {
            app.loading = false
            app.selectedRowKeys = []
            app.$refs.table.refresh()
            app.visible2 = false
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
